<template>
	<div>
		<div class="header">
			<h1 class="commission"> {{info.commission}}</h1>
			<p class="u-font-xs">{{$t('累计总佣金')}}</p>
		</div>

		<u-cell-group>

			<u-cell-item :title="$t('可提现佣金')" :value="info.withdraw_amount" :arrow="false" :value-style="cellStyle">
			</u-cell-item>
			<u-cell-item :title="$t('已申请佣金')" :value="info.applied_amount" :arrow="false" :value-style="cellStyle">
			</u-cell-item>
			<u-cell-item :title="$t('待打款佣金')" :value="info.waitpay_amount" :arrow="false" :value-style="cellStyle">
			</u-cell-item>
			<u-cell-item :title="$t('成功提现佣金')" :value="info.success_amount" :arrow="false" :value-style="cellStyle">
			</u-cell-item>
			<u-cell-item :title="$t('无效佣金')" :value="info.invalid_amount" :arrow="false" :value-style="cellStyle">
			</u-cell-item>
			<u-cell-item :title="$t('待收货佣金')" :value="info.waitrece_amount" :arrow="false" :value-style="cellStyle">
			</u-cell-item>
			<u-cell-item :title="$t('未结算佣金')" :value="info.unsettled_amount" :arrow="false" :value-style="cellStyle">
			</u-cell-item>
		</u-cell-group>
	</div>
</template>

<script>
	export default {
		name: "commissionDetail",
		data() {
			return {
				info: {},
				cellStyle: {
					"color": "#333"
				},
			}
		},
		onLoad() {
			this.getCommissionDetails()
		},
		methods: {
			getCommissionDetails() {
				this.$http.getCommissionDetails().then(res => {
					this.info = res.data.distrib_info
				})
			},
			getBankCardinfo() {
				this.$http.getBankCardinfo().then(res => {
					if (res.status == 200) {
						if (res.data) {
							this.getnav('/pagesC/wallet/withdraw')
						} else {
							this.$toast(this.$t('请先绑定银行卡'))
							setTimeout(() => {
								this.getnav('/pagesC/wallet/myBankCard')
							}, 1000)
						}

					}
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	@import "uview-ui/index.scss";

	.header {
		background-color: $u-type-error;
		padding: 50upx 80upx;
		text-align: center;
		color: #fff;

		.commission {
			font-size: 54upx;
		}
	}

	.withDrawBtn {
		position: fixed;
		bottom: 30upx;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
